<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


<html>

<head>
  <title>Movie.com</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="lib/elementui/theme-chalk/index.css" type="text/css">
  <style>
    body {
      margin: 0px;
    }

    /* 所有 */
    #app {
      width: 100%;
      height: 100%;
    }

    /* 头 */
    .header {
      color: rgba(255, 255, 255, 0.75);
      line-height: 60px;
      background-color: #24292e;
      text-align: center;
    }

    .header div {
      display: inline;
    }

    .title {}

    .author {
      float: right;
    }

    .author-img {
      width: 20px;
      height: 20px;
    }

    .author-github {
      cursor: pointer;
    }

    /* 内容区 */
    .container {
      min-height: 600px;
      width: 100%;
      height: 100%
    }

    /* 左边内容区 */
    .left {
      color: #4b595f;
      width: 200px;
    }

    .left .totalUl {
      height: 93%;
    }

    /* 右边内容区 */
    .right {
      min-width: 200px;
    }

    tbody {
      font-size: 15px;
      color: #4b595f;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-container class="container">
      <el-header class="header">
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

          <el-menu-item index="1" @click> <img class='logoimg' style="width: 200px;height: 50px;" alt=""
              src="./static/imgs/logo_icon.png">
          </el-menu-item>
          <el-menu-item index="2">我的信息</el-menu-item>

          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4" style="float: right;" @click="logout">退出</el-menu-item>

        </el-menu>



      </el-header>

      <el-container>
        <el-aside class="left">
          <el-menu :default-active="activeIndex" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b" class="totalUl">
            <el-menu-item index="1" @click="open(settingurl)"><i class="el-icon-setting"></i>系统信息</el-menu-item>
            <el-submenu :index="firstMenu.id" v-for="firstMenu in menus" :key="firstMenu.id">
              <template slot="title"><i :class="firstMenu.iconClass"></i>{{ firstMenu.name }}</template>
              <el-menu-item-group v-for="secondMenu in firstMenu.children" :key="secondMenu.id">
                <template slot="title">{{ secondMenu.name }}</template>
                <el-menu-item v-for="thirdMenu in secondMenu.children" :index="thirdMenu.id" :key="thirdMenu.id"
                  @click="open(thirdMenu.url)">{{ thirdMenu.name }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
        </el-aside>

        <el-main class="right">
          <iframe style="width:100%; height:100%; border: 0;" :src="iframeUrl"></iframe>
        </el-main>

      </el-container>
    </el-container>
  </div>
  <!-- 引入组件库 -->
  <script type="text/javascript" src="lib/vue.js"></script>
  <script type="text/javascript" src="lib/elementui/index.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
        activeIndex2: "0",
        activeIndex: "1",
        settingurl: "systeminfo.jsp",
        iframeUrl: "systeminfo.jsp",

        menus: [
          {
            name: "电影管理",
            id: "date",
            iconClass: "el-icon-time",
            children: [
              {
                name: "电影管理",
                id: "moviemanager",
                children: [
                  { name: "电影管理", id: "moviemanager1", url: "moviemanager.jsp" },
                ]
              }
            ]
          },

          {
            name: "评论管理",
            id: "Dialog",
            iconClass: "el-icon-message",
            children: [
              {
                name: "评论管理",
                id: "notification",
                children: [
                  { name: "评论管理", id: "notification", url: "commentmanager.jsp" },
                ]
              }
            ]
          },
          {
            name: "用户管理",
            id: "Tab",
            iconClass: "el-icon-more",
            children: [
              {
                name: "用户管理",
                id: "Tab1",
                children: [
                  { name: "用户管理", id: "tab-demo1", url: "usermanager.jsp" }
                ]
              }
            ]
          },

          {
            name: "影院管理",
            id: "upload",
            iconClass: "el-icon-news",
            children: [
              {
                name: "影院管理",
                id: "commentmanager",
                children: [
                  { name: "影院管理", id: "commentmanager", url: "placemanager.jsp" }
                ]
              }
            ]
          },
          {
            name: "票务管理",
            id: "billmanager",
            iconClass: "el-icon-news",
            children: [
              {
                name: "票务管理",
                id: "billmanager",
                children: [
                  { name: "票务管理", id: "billmanager", url: "billmanager.jsp" }
                ]
              }
            ]
          },
        ]
      },
      methods: {
        handleSelect() {

        },
        open(url) {
          this.iframeUrl = url;
        },
        openGitHub() {
          window.open("https://github.com/yuleGH", "_blank");
        },
        logout() {
          axios.post("/logout").then(
            window.location.href = "/"
          )
        }
      }
    });
  </script>

</body>

</html>